<template>
  <div class="area-sty" v-if="shopProductList && shopProductList.length > 0">
    <div class="head">
      <div class="left">{{ $t('header.detail_tit_text') }}</div>
      <div class="right" @click="jumpMet()">
        {{ $t('header.more_shop_product') }}
        <Icon type="ios-arrow-forward" />
      </div>
    </div>
    <div class="goods-sty" :style="computedStyle">
      <div v-for="(item, index) in shopProductList" :key="index" class="product-list" @click="lookDet(item,index)">
        <img :src="item.mainImg" class="pd-img" alt="">
        <div class="pd-name">{{ item.title }}</div>
        <div class="amount">{{ userCurrency.code }} {{ item.price }}</div>
      </div>
    </div>
    <div class="name">{{ $t('diy.diy_label_text1') }}</div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { toSeoFriendsChannel } from '@/common/common';
import { pointUser } from "@/common/point/api-hook";//打点日志
import { detailPoint } from '@/api/user';

export default {
  props: {
    shopProductList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapState({
      userCurrency: (state) => state.user.userCurrency,
      userInfo: state => state.user.userInfo,
    }),
    computedStyle() {
      if (this.shopProductList.length < 7) {
        return {
          padding: '0'
        };
      } else {
        return {};
      }
    }
  },
  methods: {
    jumpMet() {
			pointUser('actions', '3003-2');
      this.$router.push('/shopWindow')
    },
    lookDet(item,index) {
      const query = {};
      if (this.userInfo.inviteCode) {
        query.inviteCode = this.userInfo.inviteCode
      }
      const channelId = toSeoFriendsChannel(item.channel);
      let toUrl = this.$router.resolve({
        path: `/product/${channelId}/${item.spu}`,
        query
      });
			let data = {
				channel:2,
				position:index + 1,
				detailUrl:`${this.$store.state.config.config.webDomain}/product/${channelId}/${item.spu}`,
				productChannel:item.channel,
				productType:item.categoryName,
				spuNo:item.spu,
				price:item.price
			}
			detailPoint(data)
      window.open(toUrl.href);
    }
  }
}
</script>
<style lang="less" scoped>
.area-sty {
  padding-top: 32px;
  border-top: 1px solid #E9EAF3;
  margin-top: 20px;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 22px;
      color: #333333;
      line-height: 32px;
    }

    .right {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #FF186B;
      line-height: 23px;
      cursor: pointer;
    }
  }

  .goods-sty {
    width: 100%;
    padding-bottom: 32px;
    overflow: auto;
    overflow-y: hidden;
    display: flex;
    gap: 42px;

    .product-list {
      cursor: pointer;

      .pd-img {
        width: 248px;
        height: 248px;
				object-fit: cover;
      }

      .pd-name {
        width: 248px;
        height: 48px;
        white-space: pre-line;
        /*允许换行*/
        overflow: hidden;
        text-overflow: ellipsis;
        /*省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*行向垂直排列*/
        -webkit-line-clamp: 2; //*限制2
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 24px;
        margin-top: 12px;
      }

      .amount {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #FF186B;
        line-height: 24px;
        margin-top: 8px;
      }
    }
  }

  .goods-sty::-webkit-scrollbar {
    width: 4px;
    /* 设置滚动条的宽度 */
  }

  .goods-sty::-webkit-scrollbar-track {
    background: #F8F9FC;
    /* 设置轨道的背景颜色 */
  }

  .goods-sty::-webkit-scrollbar-thumb {
    background: #E9EAF3;
    /* 设置滑块的背景颜色 */
    border-radius: 24px;
  }

  .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 22px;
    color: #333333;
    line-height: 26px;
    margin-top: 32px;
  }
}
</style>
